<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
    <style>
        body,
        div {
            margin: 0;
            padding: 0;
            text-align: center;
        }

        body {
            background-color: #999;
        }

        .box {
            width: 300px;
            height: 280px;
            background-color: #fff;
            padding-top: 20px;
        }

        .img {
            position: relative;
        }

        div .img img {
            width: 275px;
            height: 155px;
        }


        .bottom {
            display: inline-block;
            width: 275px;
            height: 100px;
            text-align: left;
        }

        .bottom .text {
            text-align: left;
        }

        .bottom .info {
            font-size: 12px;
            color: #999;
        }

        .bottom .info .text::before {
            content: "";
            width: 16px;
            height: 16px;
            background-image: url(../image/UP主.png);
            display: inline-block;
            background-size: cover;
            vertical-align: text-bottom;
            margin-right: 6px;
            color: #999;
        }

       .strip
       {
          position: relative;
          width: 275px;
          background-color:rgba(red, green, blue, .5);
          left: 12px;
          bottom: 30px;
       }
       
       .picture
       {
            display: inline-block;
            background-size: cover;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 5px;
       }
       
      .strip .play {
            background-image: url(../image/xiayige.png);
            left: 15px;
        }

        .strip .count
        {
            position: absolute;
            left: 50px;
            color: #fff;
        }


      .strip .comment
      {
        left: 100px;
        background-image: url(../image/comment.png) ,linear-gradient(#f00,#f00);
         background-blend-mode: lighten;
         
      }

      
      .strip .comment-count
      {
          left: 140px;
          color: #fff;
      }
      

      .strip .time
      {
         position: absolute;
         right: 5px;
         color: #fff;
      }


        


    </style>
</head>

<body>
    <div class="box">
        <div class="top">
            <div class="img">
                <img src="../image/bili02.png" alt="照片">
                <div class="strip">
                    <i class="play picture"></i>
                    <span class="count">29.4万</span>
                    <i class="comment picture"></i>
                    <span class="comment-count">176</span>
                    <span class="time">3:16</span>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="text">
                为什么总说甄嬛清高？自我=利己主义？揭开“我本位”思维
            </div>
            <div class="info">
                <div class="text">此间无双i· 11-27</div>
            </div>
        </div>
    </div>
</body>

</html>